<template>
  <div class="main">
    <div class="pageLeft">
      <div class="sunBoxTitel">
        <img class="logo" src="../../static/image/logo.png"/>
        <span class="sunBox">阳光盒子</span>
      </div>
      <div class="pageHead">
        <div class="icon"></div>
        <p class="screenIcon"></p>
        <p class="recommendLesson">推荐课程</p>
      </div>
      <div class="putLesson" @click="details('5b5b39cbee920a003d284d8a',undefined,'”阅读+科学“活动《种子发芽》', 0)">
        <div class="left-action">
          <div class="recommond-play">
            <img src='../../static/image/icon/next.png'/>
          </div>
          <div class="recommend-lesson-title">
            ”阅读+科学“活动《种子发芽》
          </div>
        </div>

      </div>
      <div class="screenLesson">
        <div class="screenIcon"></div>
        <div class="screenTxt">筛选</div>
      </div>
      <div class="pageBody">
        <p style="margin: 0" class="classList siderbar-action">按班级</p>
        <!--<ul class="classTypeList" style="margin-left: -60px;color: #a6a9ad ">-->
        <div class="siderbar-action-container">
          <div v-for="(classLabel,index ) in classList"
              @click="changeFilter(classList, index )" :class="{ 'is-check' : classLabel.isChecked ,'siderbar-action-item': true} ">
            <img class="checkbox" v-if="!classLabel.isChecked" src="../../static/image/icon/checkbox_unselect.jpg">
            <img class="checkbox" v-if="classLabel.isChecked" src="../../static/image/icon/checkbox_selected.png">
            {{classLabel.name}}
          </div>

        </div>

        <p style="margin: 0" class="subjectList siderbar-action">按学科</p>
        <div class="siderbar-action-container">
          <div v-for="(subject, index) in subjectList"
              @click="changeFilter(subjectList, index )" :class="{ 'is-check' : subject.isChecked, 'siderbar-action-item': true}">
            <img class="checkbox" v-if="!subject.isChecked" src="../../static/image/icon/checkbox_unselect.jpg">
            <img class="checkbox" v-if="subject.isChecked" src="../../static/image/icon/checkbox_selected.png">
            {{subject.name}}
          </div>
        </div>
        <!--<ul class="classTypeList" v-for="(item,index) in labelList" :class="{red:changeRed.indexOf(index)!==-1}" @click="check(index,item)">-->
        <!--<li class="classType">{{item}}</li>-->
        <!--</ul>-->
      </div>
      <button class="favorite" @click="getLikeLesson">
        <img src="../../static/image/icon/like.png"/>
        我的收藏夹
      </button>
    </div>
    <div class="pageRight">
      <div class="headList">
        <div class="left-nav">
          <img v-if=!isInFavorateView class="menu" src="../../static/image/icon/list.png"/>
          <img @click="getLesson([])" v-if=isInFavorateView class="return_menu" src="../../static/image/icon/left.svg"/>
          <span v-if=!isInFavorateView class="lessonList">课程列表</span>
          <span @click="getLesson([])" v-if=isInFavorateView class="lessonList">我的收藏夹</span>
        </div>
        <div class="header-right">
          <div class="header-right-action">
            <img src="../../static/image/icon/teacher.png" class="header-icon"/>
            <span class="">{{teacher_name}}</span>
          </div>
          <div class="header-right-action_middle" @click="">
            <img src="../../static/image/icon/company.png" class="header-icon"/>
            <span>阳光书屋</span>
          </div>
          <div class="header-right-action">
            <img src="../../static/image/icon/logou.png" class="header-icon"/>
            <span @click="logout">退出</span>
          </div>
        </div>
      </div>

      <div class="colorBar">
        <div v-for="color in colorList" class="colorStrip" v-bind:style="{backgroundColor:color}"></div>
      </div>
      <div class="pageTwo" id="page" v-bind:style="{height:pageHeight+'px'}">
        <div style="height: 100%;overflow: auto">
          <div style="width:100%;height: 80%;">
            <el-col :span="4" v-for="(item, index) in lessonsList" class="lessons">
              <div class="list" @click="details(item.id +(item.verstion || ''),item.subject,item.name, index)">
                <img :src="item.coverImage ? item.coverImage.url: '../../static/image/coverImage/group_6.png'"
                     class="listImg"/>
                <div class="lesson-name">
                  {{item.name}}
                </div>
              </div>
            </el-col>

          </div>
        </div>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-size="80"
            layout="prev, pager, next"
            :total="pageSize">
          </el-pagination>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
  import Analytics from "@/js/analytics.js"
  import Data from "@/js/server.js"
  export default {
    name: "lessonList",
    data() {
      return {
        pageHeight: 0,
        teacher_name:'',
        lessonsList: [],
        subjectList: [],
        classList: [],
        colorList: ['#881894', '#2D8DEE', '#00DE2E', '#FFBF00', '#F38100', '#F74E1B', '#CF2118', '#34465F', '#AB32B8', '#499DF2', '#00DE2E', '#FFBF00', '#F38100', '#F74E1B', '#CF2118'],
        tagList: [],
        chooseLessonList: [],
        changeRed: [],
        filterContainer: {
          classList: [],
          subjectList: []
        },
        lessons: [],
        Headlines: '我的收藏',
        reset: false,
        isInFavorateView:false,
        pageSize:0
      }
    },
    mounted: function () {
      this.getLabels();
      this.getLessonCount([]);
      this.getLesson([],1);
      this.getWindowHeight();
      this.getUsername();

    },
    methods: {
      handleCurrentChange(val){
        console.log(`当前页: ${val}`);
        this.getLesson([],val)
      },
      handleSizeChange(val){
        console.log(`每页 ${val} 条`);
      },
      getUsername(){
        var self =this;
        var userId = AV.User.current().toJSON().objectId
        var query = new AV.Query('_User');
        query.get(''+userId).then(function (todo) {
          self.teacher_name =todo.toJSON().username
        }, function (error) {
           // 异常处理
         });
      },
      getLessonCount(filterCondition){
        var self = this;
        Data.getRoles((isAdmin) => {
          if (isAdmin) {
            return Data.getLessonListCountWithNeedCheck(filterCondition, (count) => {
              self.pageSize = count
            })
          }
          Data.getLessonCountFromLeanCloud(filterCondition, (count) => {
            self.pageSize = count
          })
        })
      },

      getLabels() {
        Data.getLabels(2).then(labelList => {
          this.classList = labelList.map(label => {
            label.isChecked = false;
            return label
          })
        });
        Data.getLabels(0).then(labelList => {
          this.subjectList = labelList.map(label => {
            label.isChecked = false;
            return label
          })
        })
      },
      getWindowHeight: function () {
        var H = document.documentElement.clientHeight - 130 ;
        this.pageHeight = H;
      },
      burPoint: function (subject, lessonName) {
        var self = this
        var userId = AV.User.current().toJSON().objectId
        Analytics.openLesson(lessonName, userId)
      },
      details: function (id, subject, name, index) {
        this.$router.push({
          path: '/lessonInfo/' + id       //lesson
        })
        localStorage.setItem('currentLessonIndex', index)
        this.burPoint(subject, id)
      },

      check: function (index, name) {
        -1 === this.changeRed.indexOf(index) ? this.addValue(index, name) : this.removeByValue(this.changeRed, index, name, this.tagList);
      },
      //删除数组中的制定的元素
      removeByValue: function (arr, val, name, tagList) {
        var self = this;
        for (var i = 0; i < arr.length; i++) {
          if (arr[i] == val) {
            arr.splice(i, 1);
            break;
          }
        }
        for (var j = 0; j < tagList.length; j++) {
          if (tagList[j] == name) {
            tagList.splice(j, 1);
            break;
          }
        }
        var lessonList = [];
        var chooseLessons = [];
        this.tagList.forEach(function (tag) {
          self.lessons.forEach(function (lesson) {
            lesson.tags.forEach(function (value) {
              if (value.indexOf(tag) >= 0) {
                lesson.push(lesson)
              }
            })
          })
          if (self.tag.length > 1) {
            chooseLessons = self.unique(lessonList)
          }
          else {
            chooseLessons = lessonList
          }
        })
        self.chooseLessonList = chooseLessons;
      },
      addValue: function (index, name) {
        var lessonList = [];
        var self = this;
        var chooseLessons = []
        this.changeRed.push(index);
        this.tagList.push(name);
        this.tagList.forEach(function (tag) {
          // console.log(tag)
          self.lessons.forEach(function (lesson) {
            lesson.tags.forEach(function (value) {
              if (value.indexOf(tag) >= 0) {
                lessonList.push(lesson)
              }
            })
          })
          if (self.tagList.length > 1) {
            chooseLessons = self.unique(lessonList)
          }
          else {
            chooseLessons = lessonList
          }
        })
        self.chooseLessonList = chooseLessons
      },
      unique: function (arr) {
        var self = this;
        var tmp = [];
        arr.forEach(function (item) {
          let count = 0
          for (var i = 0; i < arr.length; i++) {
            if (item == arr[i]) {
              count++;
            }
          }
          (arr.indexOf(item) !== arr.lastIndexOf(item) && tmp.indexOf(item) === -1 && count === self.tagList.length) && tmp.push(item)
        })
        console.log(tmp)
        return tmp;
      },
      getLesson: function (filterCondition,pageIndex) {
        Data.getRoles((isAdmin) => {
          if (isAdmin) {
            return Data.getLessonListWithNeedCheck(filterCondition, pageIndex, (lessonsList) => {
              this.lessonsList = lessonsList
              console.log(lessonsList);
              localStorage.setItem('lessonsList', JSON.stringify(lessonsList))
            })
          }
          Data.getLessonListWithTeacher(filterCondition,pageIndex, (lessonsList) => {
            this.lessonsList = lessonsList
            localStorage.setItem('lessonsList', JSON.stringify(lessonsList))
          })
        })
        this.isInFavorateView = false

      },
      handelLessonLikeStatus: function (lessonList, likeLessonList) {
        lessonList.forEach(function (lesson) {
          lesson.like = false
          likeLessonList.forEach(function (likeLesson) {
            if (lesson.id === likeLesson) {
              lesson.like = true
            }
          })
        });
        return lessonList
      },
      changeFilter(filter, index) {
        filter[index].isChecked = !filter[index].isChecked
        this.filterLesson()
      },

      filterLesson() {
        let classFilterConditionList = this.classList.filter(item => item.isChecked)

        let subjectFlterConditionList = this.subjectList.filter(item => item.isChecked);
        let filterConditionList = classFilterConditionList.concat(subjectFlterConditionList)

        filterConditionList = filterConditionList.map(condition => {
          if (condition.type === 2) return 'misc.' + condition.name;
          return 'domain.' + condition.name
        });
        this.getLessonCount(filterConditionList)
        this.getLesson(filterConditionList)
      },
      getLikeLesson(){
        Data.getRoles((isAdmin) =>{
          if(isAdmin){

            return Data.getLikeLessonListNeedCheck((lessonsList) => {
                this.lessonsList = lessonsList;
                localStorage.setItem('lessonsList', JSON.stringify(lessonsList))
              }
            )
          }
          Data.getLikeLessonList( (lessonsList) => {
            this.lessonsList = lessonsList;
            localStorage.setItem('lessonsList', JSON.stringify(lessonsList))
          })

        });
        this.isInFavorateView = true
      },
      logout:function () {
        var currentUser = AV.User.current();
        var endtime=new Date().getTime()
        Analytics.useApp(currentUser.toJSON().objectId,window.localStorage.getItem('openTime'),endtime)
        localStorage.removeItem("useTime");
        AV.User.logOut()
        this.$router.push({path: '/'})
        document.body.parentNode.style.overflow = "scroll"
      },
    }
  }
</script>

<style scoped>
  .pageLeft {
    width: 271px;
    height: 100%;
    background-color: #ffffff;
    float: left
  }

  .pageRight {
    position: absolute;
    top: 0px;
    width: 1329px;
    height: 100%;
    left: 271px;
    overflow: hidden;
    background-color: #E9EDF3;
  }

  .colorBar {
    left: 8px;
    position: relative;
    width: 1329px;
    height: 4px;
  }

  .colorStrip {
    position: relative;
    float: left;
    border-bottom: 1px solid #6f7180;
    width: 88px;
    height: 4px;
    /*background-color: yellow;*/
  }

  .headList {
    position: relative;
    top: 0;
    /*width: 1329px;*/
    height: 70px;
    background-color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 51px;
  }

  .left-nav {
    height: 100%;
    width: 149px;
    padding: 0 35px;
    float: left;
  }

  /*.right-nav {*/
    /*width: 400px;*/
    /*height: 100%;*/
    /*float: right;*/
    /*display: flex;*/
  /*}*/

  /*.secretor {*/
    /*width: 100px;*/
    /*height: 100%;*/
    /*margin-left: 90px;*/
    /*display: block;*/
  /*}*/

  /*.icon {*/
    /*position: absolute;*/
    /*top: 105px;*/
    /*left: 6px;*/
    /*width: 4px;*/
    /*height: 20px;*/
    /*display: block;*/
    /*background-color: #FE9907;*/
  /*}*/

  .sunBox {
    position: relative;
    min-width: 120px;
    height: 42px;
    top: 14.5px;
    left: 70px;
    font-size: 25px;
    color: #FE9907;
  }

  .logo {
    position: relative;
    top: 18px;
    left: 65px;
    width: 39px;
    height: 34px;

  }

  .recommendLesson {
    position: absolute;
    top: 84px;
    font-size: 18px;
    min-width: 103px;
    /*height: 66px;*/
    left: 24px;
  }

  .sunBoxTitel {
    min-width: 150px;
    width: 271px;
    height: 70px;
    border-bottom: 5px solid #EAEBEE;
  }

  .main {
    position: absolute;
    margin: 0;

    /*overflow-x: hidden;*/
    height: 100%;
    background-color: #E4E7EC;

  }

  .pageHead {
    height: 65px;
  }

  .putLesson {
    background-image: url("../../static/image/coverImage/recommond-course-cover.png");
    background-size: 100% 100%;
    margin-left: 6px;
    width: 256px;
    height: 193px;
    position: relative;

  }

  .left-action{
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 0;
    height: 41px;
    width: 100%;

  }
  .recommond-play {
    height: 41px;
    width: 41px;
    background-color: #ff9933;
    padding: 10px;
    box-sizing: border-box;
    line-height: 0;
  }
  .recommond-play img{
    height:   20px;
    width: 20px;
  }

  .recommend-lesson-title {
    padding-left: 12px;
    flex-grow: 1;
    height: 41px;
    background: rgba(0, 0, 0, 0.3);
    color: #ffffff;
    font-size: 14px;
    line-height: 41px;
  }

  .screenLesson {
    height: 80px;
    display: flex;
    padding: 30px 6px;
    line-height: 50px;
    box-sizing: border-box;
  }
  .siderbar-action{
    font-size: 16px;
    color: #333333;
  }

  .pageHead .screenIcon
  {
    width: 1px !important;
  }
  .screenIcon {
    /*position: absolute;*/
    /*top: 332px;*/
    /*left: 14px;*/
    width: 3px;
    height: 20px;
    background-color: #FE9907;
  }

  .screenTxt {
    /*position: relative;*/
    padding-left: 20px;
    font-size: 18px;
    /*top: 10px;*/
    line-height: 20px;
    width: 66px;
    /*height: 66px;*/
    /*left: 28px;*/
  }

  .pageBody {
    /*margin-top: -10%;*/
    margin-left: 29px;
    /*overflow-y: scroll;*/
    font-size: 20px;
    /*height: 30%;*/
    width: 87.1%;
  }

  .favorite {
    margin: 0;
    padding: 0;
    border: 1px;
    position: relative;
    top: 72%;
    left: 16px;
    font-size: 16px;
    width: 238px;
    height: 42px;
    background-color: #a6c738;
    color: white;
  }

  .pageTwo {
    position: relative;
    text-align: center;
    overflow: hidden;
    padding: 30px 0;
    top: 3px;
    left: 14px;
    margin-top: 10px;
    min-width: 800px;
    overflow-x: auto;
    width: 1304px;

    border-radius: 12px;
    background-color: #ffffff;
  }
  .pagination{

  }

  .classType {
    cursor: pointer;
    margin: 0;
  }

  .classTypeList {
    margin-left: -36px;
    font-size: 13px;
    list-style: none;

  }

  .red {
    color: green;
  }

  .lessonList {
    position: absolute;
    left: 62px;
    top: 26px;
    font-size: 14px;
    color: #333333;
  }

  /*.xiaomishu {*/
    /*margin-top: 23px;*/
    /*float: left;*/
  /*}*/

  /*.xiaomishutext {*/
    /*!*position: absolute;*!*/
    /*margin-top: 27px;*/
    /*padding-left: 8px;*/
    /*min-width: 36px;*/
    /*width: 73px;*/
    /*height: 43px;*/
    /*font-size: 14px;*/
    /*color: #666666;*/
    /*float: left;*/
  /*}*/

  /*.timeBook {*/
    /*width: 113px;*/
    /*height: 100%;*/
    /*visibility: hidden;*/
  /*}*/

  /*.timeBookLog {*/
    /*width: 18px;*/
    /*height: 15px;*/
    /*margin-top: 27px;*/
    /*float: left;*/
  /*}*/

  /*.timeBookText {*/
    /*width: 87px;*/
    /*height: 43px;;*/
    /*margin-top: 27px;*/
    /*min-width: 48px;*/
    /*font-size: 14px;*/
    /*color: #666666;*/
    /*padding-left: 8px;*/
    /*float: left;*/

  /*}*/

  /*.logout {*/
    /*width: 97px;*/
    /*height: 100%;*/
    /*display: block;*/
  /*}*/

  .backImg {
    width: 17px;
    height: 17px;
    margin-top: 27px;
    float: left;
  }

  .backText {
    width: 58px;
    height: 43px;;
    margin-top: 27px;
    font-size: 14px;
    color: #666666;
    padding-left: 8px;
    float: left;
    min-width: 24px;
  }

  .menu {
    /*position:absolute;*/
    /*left: 35px;*/
    /*top:18px;*/
    /*margin:auto 0;*/

    margin: 28px 0 23px;
    width: 18px;
    height: 14px;
  }
  .return_menu {
    /*position:absolute;*/
    /*left: 35px;*/
    /*top:18px;*/
    /*margin:auto 0;*/
    margin: 28px 0 23px;
    width: 18px;
    height: 18px;
  }

  .list {

  }

  .listImg {
    /*margin-left: ;*/
    height: 143px;
    width: 184px;
  }

  .lessons {
    margin-top: 17.5px;
    height: 185px;
    overflow: hidden;
  }

  .classList {
    color: #333333;
    font-size: 16px;
  }

  .lessonsList {
    color: #333333;
    font-size: 16px;
  }

  .classTypeList {
    font-size: 14px;
    color: #838383;
  }

  .lesson-name {
    font-size: 15px;
    color: #333333;
    height: 42px;
    line-height: 42px;
    width: 100%;
  }

  .lessonTitle {
    margin-left: -120px
  }

  .is-check {
    color: #a6c738 !important;
  }
  .siderbar-action-container{
    display: table;
    width: 100%;
    padding: 5px 0  35px 0;
    cursor: pointer;
  }
  .checkbox{
    width: 16px;
    height: 16px;
    padding-right: 6px;
  }
  .siderbar-action-item{
    float: left;
    padding-right: 20px;
    padding-top: 10px;
    color: #838383;
    font-size: 14px;
    display: flex;
    align-items: center;
  }

  /*.pageRight::-webkit-scrollbar {display:none}*/
</style>
<style   src="../css/common.css">
</style>

